<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Cbox短视频</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }

        body {
            font-size: 16px;
            color: #333;
            background-color: #fff;
        }

        a:link, a:visited, a:hover, a:active {
            color: #333;
            text-decoration: none;
        }

        .zwsty {
            width: 100%;
            overflow: hidden;
        }

        .k1 {
            width: 3.4rem;
            height: 3.4rem;
            background-image: url(/public/static/img/h5/a032x.png);
            display: block;
            background-size: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1.7rem;
            margin-top: -1.7rem;
            background-repeat: no-repeat;
        }

        .k2 {
            font-size: 1.125rem;
            padding: 1rem;
            font-weight: 700;
            /*background-image: url(/public/static/img/h5/a042x.png);*/
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1rem
        }

        .gh1 {
            position: relative;
        }

        .hfw {
            padding: 0 1rem .75rem 1rem;
            font-size: 0.875rem;
            font-weight: 700;
        }

        .list1 {
            padding: 0 0 0 1rem;
            overflow: hidden;
        }

        .jfx1 {
            display: block;
            width: 50%;
            height: 183px;
            float: left;
        }

        .bv16 {
            padding-right: 1rem;
            position: relative
        }

        .bv85 {
            width: 40%;
            float: left;
        }

        .sv1 {
            font-size: .75rem;
        }

        .sv2 {
            font-size: 1rem;
            padding-right: 1rem
        }

        .yj {
            border-radius: 0.5rem;
            width: 100%;
            height: 92px;
        }

        .yj1 {
            border-radius: 0.5rem;
            width: 100%;
            height: 78px;
        }

        .time {
            position: absolute;
            left: .5rem;
            bottom: .5rem;
            font-size: .75rem;
            font-weight: 700;
            color: #fff
        }

        .lux1 {
            width: 100%;
            overflow: hidden;
            padding-bottom: 1rem
        }

        .list2 {
            padding: 0 1rem;
            padding-bottom: 4rem;
        }

        .bv86 {
            float: left;
            width: 60%
        }

        .cb {
            padding-left: 1rem
        }

        .sxv1 {
            width: 100%;
            height: 5rem;
            background-color: #fff;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 999
        }

        .opl {
            width: 9.5rem;
            display: block;
            margin-top: .625rem;
            margin-left: 1rem;
            float: left;
        }

        .opr {
            width: 4.375rem;
            display: block;
            padding-left: 1rem;
            float: right;
            margin-top: 1.625rem;
            margin-right: 1rem
        }

        img {
            width: 100%;
        }

        #vjs {
            width: 100%;
            height: 14rem;
            object-fit: fill;
        }

        #play-btn {
            width: 48px;
            height: 48px;
            top: 50%;
            left: 50%;
            margin-left: -1.47rem;
            margin-top: -1.47rem;
            z-index: 10;
            position: absolute;
            background: url(/public/static/img/h5/play.svg) no-repeat center;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="zwsty">
    <div class="gh1">
        <span id="play-btn"></span>
        <video id="vjs" poster="{$first.pic}">
            <source src="{$first.fileUrl}" type="video/mp4"/>
        </video>
    </div>
    <div class="k2">{$first.fileName}</div>
</div>
<div class="hfw">热门推荐</div>
<div class="list1">
    <ul>
        {volist name="two" id="vo"}
        <li class="jfx1">
            <div class="bv16">
                <img src="{$vo.pic}" class="yj">
                <div class="time">{:s_to_hs($vo.duration)}</div>
            </div>
            <a href="javascript:" class="sv1 download" style="color: #ff3737">打开APP</a>
            <div class="sv2">{$vo.fileName|msubstr=###,0,17,'utf-8'}</div>
        </li>
        {/volist}
    </ul>
</div>
<div class="hfw">猜你喜欢</div>
<div class="list2">
    <ul>
        {volist name="three" id="vo"}
        <li class="lux1">
            <div class="bv85">
                <img src="{$vo.pic}" class="yj1">
            </div>
            <div class="bv86">
                <div class="cb">{$vo.fileName|msubstr=###,0,17,'utf-8'}</div>
                <div class="cb">
                    <a href="javascript:" class="sv1 download" style="color: #ff3737">打开APP</a>
                    <a href="javascript:" class="sv1">CBOX短视频</a>
                </div>
            </div>
        </li>
        {/volist}
    </ul>
</div>
<div class="sxv1">
    <a href="javascript:" class="opl">
        <img src="/public/static/img/h5/logo2x.png">
    </a>
    <a href="javascript:" class="opr download">
        <img src="/public/static/img/h5/a052x.png">
    </a>
</div>
<script src="__JS__/jquery.min.js"></script>
<script>
    $('#play-btn').click(function () {
        $('#play-btn').hide();
        document.getElementById('vjs').play();
    });

    $('.download').click(function () {
        window.location.href = "/download";
    });
</script>
</body>
</html>